<!--
 * @Description:产品卡片 - 首页
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-6-29 10:10:00
 * @LastEditors: WangXi
 * @LastEditTime: 2023-06-29 18:30:01
-->
<template>
	<view class="discovery-card">
		 <imageForSize w="100%" h="394rpx" :src="data.src"></imageForSize>
		 <view class="info-box">
			 <!--  -->
		 	<view class="type-box">
		 		<view class="black">
		 			<text>{{data.black}}</text>
		 		</view>
				<view class="blue">
					<text>{{data.blue}}</text>
				</view>
		 	</view>
			<!-- 商品名 -->
			<view class="good-name">
				{{data.goodName}}
			</view>
			<!-- 销量价格 -->
			<view class="price-sales">
				<text class="price">${{data.price}}</text>
				<text class="sales">100+sales volume</text>
			</view>
		 </view>
	</view>
</template>

<script>
	export default {
		props:{
			data:{}
		},
		data() {
			return {
			}
		},
		methods: {
			// 
		}
	}
</script>

<style lang="scss" scoped>
	 .discovery-card{
		width: 330rpx;
		height: 498rpx;
		background-color: #fff;
		.info-box{
			padding-top: 12rpx;
			padding-left: 20rpx;
			.type-box{
				width: 134rpx;
				height: 24rpx;
				background: pink;
				display: flex;
				text{
					font-size: 10rpx;
					color: #fff;
				}
				.black{
					background-color: #303735;
				}
				.blue{
					background-color: #2934D0;
				}
				
			}
			>.good-name{
				padding-top: 8rpx;
				color: #91909A;
			}
			>.price-sales{
				display: flex;
				justify-content: space-between;
				padding-top: 6rpx;
				.price{
					font-size: 24rpx;
				}
				.sales{
					font-size: 16rpx;
					color: #91909A;
				}
			}
		}
	}
</style>
